<template>
  <el-main id="home">
    <div class="el-center">
      <!-- <transition name='fade'> -->
        <div v-if='currentShow==="login"' class="login form-outer">
          <el-form ref="loginForm" status-icon :model="loginData" :rules="rules.loginRules">
            <div class="title">
              <h3>{{loginMsg.loginH3}}</h3>
              <a @click='currentShow="signup"'>{{loginMsg.loginState}}</a>
            </div>
            <el-form-item label="" prop='identifier'>
              <el-input v-model="loginData.identifier" placeholder="enter email or phone"></el-input>
            </el-form-item>
            <el-form-item label="" prop='password'>
              <el-input v-model="loginData.password" placeholder="password" type="password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="Login">{{loginMsg.loginBtn}}</el-button>
            </el-form-item>
          </el-form>
        </div>
      <!-- </transition>
      <transition name='fade'> -->
        <div v-if='currentShow==="signup"' class="signup form-outer">
          <el-form ref="signupForm" status-icon :model="signupData" :rules="rules.signupRules">
            <div class="title">
              <h3>{{signupMsg.signupH3}}</h3>
              <a @click='currentShow="login"'>{{signupMsg.signupState}}</a>
            </div>
            <el-form-item label="" prop='email'>
              <el-input v-model="signupData.email" placeholder="enter your email" type="email"></el-input>
            </el-form-item>
            <el-form-item label="" prop='password'>
              <el-input v-model="signupData.password" placeholder="password" type="password"></el-input>
            </el-form-item>
            <el-form-item label="" prop='confirmPass'>
              <el-input v-model="signupData.confirmPass" placeholder="enter your password again" type="password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="Signup">{{signupMsg.signupBtn}}</el-button>
            </el-form-item>
          </el-form>
        </div>
      <!-- </transition> -->
    </div>
  </el-main>
</template>
<script>
import api from '@/API/index'

export default {
  name: 'home',
  props: {},
  data() {
    return {
      loginMsg: {
        loginH3: this.$t('home.loginH3'),
        loginState: this.$t('home.loginState'),
        loginBtn: this.$t('home.loginBtn')
      },
      signupMsg: {
        signupH3: this.$t('home.signupH3'),
        signupState: this.$t('home.signupState'),
        signupBtn: this.$t('home.signupBtn')
      },
      currentShow: 'login',
      signupData: {
        email: '',
        password: '',
        confirmPassword: ''
      },
      loginData: {
        identityType: '',
        identifier: '',
        password: ''
      },
      rules: {
        loginRules: {
          identifier: [{ required: true, message: this.$t('home.loginIdtMsg'), trigger: 'blur' }],
          password: [{ required: true, min: 8, max: 16, message: this.$t('home.loginPassMsg'), trigger: 'blur' }]
        },
        signupRules: {
          email: [{ required: true, type: 'email', message: this.$t('home.signupIdtMsg'), trigger: 'blur' }],
          password: [{ required: true, min: 8, max: 16, message: this.$t('home.signupPassMsg'), trigger: 'blur' }],
          confirmPass: [{ required: true, min: 8, max: 16, message: this.$t('home.signupPassMsg'), trigger: 'blur' }]
        }
      },
      shop: {},
      shopId: null
    }
  },
  methods: {
    Login() {
      const emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      // 暂时不提供手机号相关登陆，仅有邮箱
      const phoneReg = /^[a-z]/
      // eslint-disable-next-line
      this.loginData.identityType = emailReg.test(this.loginData.identifier)
        ? 'email'
        : phoneReg.test(this.loginData.identity) ? 'phone' : ''

      this.$store.dispatch('login', this.loginData)
    },
    Signup() {
      api.SIGNUP(this.signupData).then(({ data }) => {
        if (data.status === 200) {
          this.loginData = {
            identityType: 'shop',
            identifier: this.signupData.email,
            password: this.signupData.password
          }
          this.$message('注册成功，请登录')
          this.currentShow = 'login'
          this.shopId = data.data
        }
      })
    }
  },
  created() {}
}
</script>

<style lang="less" scoped>
@import 'home.less';
#home {
  .el-center {
    position: relative;
    border-radius: 5px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 420px;
    padding: 35px 35px 15px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    .form-outer {
      // position: absolute;
      top: 0;
      left: 0;
      .title {
        display: flex;
        margin-bottom: 30px;
        h2 {
        }
        a {
          cursor: pointer;
          margin-left: 20px;
          font-size: 12px;
          display: flex;
          align-items: flex-end;
          color: #000;
        }
      }
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.4s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
